<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局grid</title>
</head>
<style>
    .outer {
        /* width: 1000px;
        height: 600px; */
        border: 1px solid #907d7d;
        margin: auto;

        display: grid;
        /* 网格布局列数 */
        grid-template-columns: 200px 200px 200px 200px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 200px);
        grid-template-columns: repeat(4, 1fr);

        /* 只设置了左右，中间自适应 */
        grid-template-columns: 200px auto 200px;
        /* 相当于划分成 1fr 1fr 但是第二个在缩小的时候最小也是200px     */
        grid-template-columns: 1fr minmax(200px, 1fr);
        /* 按照 200px去分总宽，有余的话，就把余下的等分给每个元素 */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

        /* 行数 */
        /* grid-template-rows: auto; */

        /* 行间距 */
        row-gap: 20px;
        /* 列间距 */
        column-gap: 20px;
        /* 统一间距 */
        gap: 20px;

        /* 排序方式 */
        grid-auto-flow: row;
        grid-auto-flow: column;
        /* 默认row  dense是如果有空隙就挤上去 */
        grid-auto-flow: row dense;


        /* 这都是对元素的排列方式 center end start stretch */
        /* 垂直方向对齐方式 */
        align-items: center;
        /* 水平方向对齐方式 */
        justify-items: center;
        /* 上面两个属性的组合写法： align-items justify-items */
        place-items: stretch stretch;

        /* 针对整个容器的对齐方式 center start end stretch space-evenly space-between space-around 属性都一样*/
        /* 垂直方向 */
        align-content: space-around;
        /* 水平方向 */
        justify-content: space-around;
    }

    .inner {
        min-height: 200px;
        background-color: #ffcf7f;
        border-radius: 8px;
    }

    .inner1 {
        /* 跨列 从第一根网格线跨到第三根网格线 */
        grid-column-start: 1;
        grid-column-end: 3;
        /* 合写 */
        grid-column: 1/3;

        /* span跨越的意思：grid-column-start: span 2; == grid-column-end: span 2; */
        grid-column-start: span 2;
        grid-column-end: span 2;

        grid-row: 1/3;

        /* 行列一起合写 grid-column-start grid-row-start grid-column-end grid-row-end */
        grid-area: 1/1/3/3;
    }

    .inner3 {
        /* 跨行 从第一根网格线跨到第三根网格线 */
        grid-row: 1/3;
        /* grid-row-start: span 2; */
    }

    /* 示例=============================================================== */
    .container {
        width: 100%;
        height: 500px;
        border: 1px solid #907d7d;
        margin: 50px auto 0;

        display: grid;
        grid-template-areas: 'header header header'
            'menu content content'
            'footer footer footer';
    }

    .header {
        background-color: darkorchid;
        grid-area: header;
    }

    .footer {
        background-color: #907d7d;
        grid-area: footer;
    }

    .menu {
        background-color: aquamarine;
        grid-area: menu;
    }

    .content {
        background-color: cadetblue;
        grid-area: content;
    }
</style>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
    </div>

    <div class="container">
        <div class="header">header</div>
        <div class="menu">menu</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>